<template> 
    <div class="bigbox">
        <div class="box1">
            <div class="c1"><span class="c1-span">蛋花豆腐羹</span></div>
            <div class="c2"><span class="c2-span">9555次浏览　　2222人喜欢</span></div>
            <div class="c3"><span class="c3-span">主要食材:</span><span class="c3-span1">鸡蛋、南豆腐西红柿、玉米、胡萝卜等</span></div>
            <div class="c4"><img src="" alt="" class="img1"></div>
            <div class="c5">
                <div class="txt">
                    <p class="p">第一步是，在锅中倒入适量的水，加热，然后把豆腐放入锅中焯一会去腥，捞起来晾凉之后，再切成小正方块。接着取1~2个鸡蛋，喜欢的就多取几个，统一打散到碗里搅拌，放在一边待会用。</p>
                    <p class="p">做完以上步骤，准备工作就完成了。第二步是在锅中倒入适量的水和油，放入切好的豆腐块。如果你准备了玉米粒，也是这个时候放。</p>
                    <p class="p">等到再煮一会，就把鸡蛋液倒入锅中，有西红柿的话，就一起放吧，再加点盐，过一会就能吃啦。</p>
                </div>
            </div>
            <div class="c6">
                <img src="../assets/1.png" alt="">
                <p class="p1">喜欢　1023</p><hr>
                </div>
        </div>
        <div class="box2">
            <div class="b1"><span class="b1-span">推荐菜谱</span></div>
            <div class="b2">
                <div class="b2-left"></div>
                <div class="b2-right">
                    <p class="b2-p1">蛋花豆腐羹</p>
                    <p class="b2-p2">鸡蛋、南豆腐、西红柿、</p>
                    <p class="b2-p2">玉米、胡萝卜</p>
                    <p class="b2-p2">2222人喜欢　4000人收藏</p>
                </div>
            </div>
            <hr>
            <div class="b2">
                 <div class="b2-left"></div>
                <div class="b2-right">
                    <p class="b2-p1">蛋花豆腐羹</p>
                    <p class="b2-p2">鸡蛋、南豆腐、西红柿、</p>
                    <p class="b2-p2">玉米、胡萝卜</p>
                    <p class="b2-p2">2222人喜欢　4000人收藏</p>
                </div>
            </div>
            <hr>
            <div class="b2">
                 <div class="b2-left"></div>
                <div class="b2-right">
                    <p class="b2-p1">蛋花豆腐羹</p>
                    <p class="b2-p2">鸡蛋、南豆腐、西红柿、</p>
                    <p class="b2-p2">玉米、胡萝卜</p>
                    <p class="b2-p2">2222人喜欢　4000人收藏</p>
                </div>
            </div>
            <div>
                <p class="pp">已加载全部</p>
            </div>
        </div>
    </div>
</template>
<style>
.bigbox{
    margin: 0 auto;
    height: 2000px;
    width: 500px;
}

.box1{
    height: 1000px;
    width: 500px;
}

.box2{
    height: 1000px;
    width: 500px;
}

.c1{
    height: 100px;
    width: 500px;
}

.c1-span{
    float: left;
    margin-top: 30px;
    font-weight: bold;
    font-size: 20px;
}

.c2-span{
    float: left;
    margin-top: 30px;
    font-size: 15px;
}

.c2{
    height: 100px;
    width: 500px;
}

.c3{
    height: 100px;
    width: 500px;
}

.c3-span{
    float: left;
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
}

.c3-span1{
    float: left;
    margin-top: 30px;
    font-size: 20px;
}

.c4{
    border-radius: 10px;
    height: 200px;
    width: 500px;
    background-color: beige;
}
.c5{
    height: 300px;
    width: 500px;
}
.c6{
    height: 200px;
    width: 500px;
}

.p{
    padding-top: 15px;
}
.p1{
    color: red;
}

.b1{
    height: 50px;
    width: 500px;
}

.b1-span{
    float: left;
    margin-top: 15px;
    font-weight: bolder;
}

.b2{
    height: 300px;
    width: 500px;
}

.b2-left{
    float: left;
    height: 250px;
    width: 250px;
    border-radius: 10px;
    background-color: beige;
}



.b2-p1{
    margin-left: 10px;
    float: left;
    font-weight: bolder;
}

.b2-p2{
    float: left;
    margin-left: 10px;
}
.pp{
    color: gray;
}
</style>